<template>

  <div class="content">
    <div class="nav">
      <div class="back" @click="goBackToSub()"><x-icon v-if="!loginOprid" type="ios-arrow-left"></x-icon></div>
      <h1 class="title">员工档案</h1>
      <div class="create">
      </div>
    </div>
    <div class="top-bg">
      <div class="portrait" :style="{backgroundImage: 'url(' + headfimg + ')' }"></div>
    </div>
    <div class="uinfo">
      <div><h6>{{ userName }}</h6><img :src="sexf"/></div>
      <div>{{ rsFullName }}</div>
      <div>{{ jobcodeDescr }}</div>
    </div>
    <div class="sub-btn-content">
      <div class="sub-detail" @click="toUserInfo">个人信息</div>
    </div>

    <div class="sub-btn-content" @click="toCompensationInformation" v-if="flag2 == 'Y'">
      <div class="sub-detail" >薪酬信息</div>
    </div>

    <!-- <div class="sub-btn-content" @click="toAttendanceCalendar">
      <div class="sub-detail sub-detail-gray">考勤信息</div>
    </div> -->

    <div class="sub-btn-content">
      <div class="sub-detail sub-detail-gray">绩效信息</div>
    </div>

    <div class="sub-btn-content"><!-- @click="toEvaluationResult"-->
      <div class="sub-detail sub-detail-gray">培训信息</div>
    </div>

    <div stype="width:100%;height:30px">&nbsp;</div>
  </div>

</template>
<script>
  import sexFa from '../userInfo/image/sexf.png'
  import { getBasicUser,getBasicInfo } from '../../api/api'

  export default {
    mounted(){
      //通过传过来的emplid获取此用户的信息
      this.emplid = this.$route.query.archivesId;
      this.loginOprid = this.$route.query.loginOprid;
      this.userDetail();
      this.flag2 = this.$store.state.flag2;
      if(this.emplid == this.$store.state.eid) {
        this.flag2 = 'Y';
      }
    },
    methods: {
      goBackToSub(){
        this.$router.push({
          name: 'Subordinates',
          query: {
            emplid: this.$route.query.topId,
            myEmplRcd: this.$route.query.myEmplRcd
          }
        })
      },
      userDetail() {
        //根据 emplId,cSeqno 获取用户信息
        var params = {
          emplid: this.emplid,
          loginOprid: this.loginOprid
        };
        getBasicInfo(params).then(res=>{
          //成功：000000
          if(res && res.retCode === '000000'){

          this.userEmail = res.retData.cEmailAddr;
          this.userPhone = res.retData.phone1;
          this.userMobile = res.retData.phone;
          this.userName = res.retData.name;
          this.rsFullName = res.retData.rsFullName;
          this.jobcodeDescr = res.retData.jobcodeDescr;
          if(res.retData.sex === 'F'){
            this.sexf = require('../userInfo/image/sexf.png');
          }else if(res.retData.sex === 'M'){
            this.sexf = require('../userInfo/image/sexm.png');
          }
          if(res.retData.photoUrl){
            this.headfimg = this.$store.state.logoAttachPath+res.retData.photoUrl;
          }else{
            if(res.retData.sex === 'F'){
              this.headfimg = require('../userInfo/image/women.png');
            }else if(res.retData.sex === 'M'){
              this.headfimg = require('../userInfo/image/man.png');
            } else {
              this.headfimg = require('../userInfo/image/headIcon.jpg');
            }
          }


        }else{
          console.log(res.retMsg);
        }
      }).catch( res=>{

          //TODO
        });

      },
      toUserInfo(){
        this.$router.push({ path:'/detail',query:{eplid: this.emplid} });
      },
      toAttendanceCalendar() {
        this.$router.push({ path:'/attendanceCalendar',query:{eplid: this.emplid} });
      },
      toCompensationInformation() {
        this.$router.push({ path:'/compensationInformation',query:{eplid: this.emplid} });
      },
      toEvaluationResult() {
        this.$router.push({ path:'/EvaluationResult',query:{emplid: this.emplid} });
      }
    },
    data() {
      return {
        headfimg: '',
        sexf: '',
        userName: '',
        userPhone: '',
        userMobile: '',
        userEmail: '',
        rsFullName: '',
        jobcodeDescr: '',
        emplid: '',
        cnta:'',
        flag2: '',
        loginOprid: this.$route.query.loginOprid,
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "./style";

  .content {
  .sub-btn-content{
    .sub-detail a{
      color: #fff;
    }
    .sub-detail-gray {
      background-color: #999;
    }
  }
  .top-bg {
    position: relative;
    width: 100%;
    height: 150px;
    background: url('./image/userbg.png') no-repeat;
    background-size: cover;
  .portrait {
    position: absolute;
    background-size: 100% 100%;
    width: 140px;
    height: 140px;
    padding: 1px;
    top: 80px;
    left: 50%;
    margin-left: -70px;
    border-radius: 50%;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
  }
  }
  .uinfo {
    margin-top: 90px;
  h6 {
    display: inline-block;
    margin-top: 10px;
    line-height: 1.8;
    font-weight:bold;
  }
  img {
    width: 20px;
    vertical-align: middle;
    padding-right: 5px;
    margin-top: 10px;
  }
  }
  }

  .nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
    margin-bottom: 10px;
  .back {
    font-size: 30px;
    font-weight: 500;
    flex: 1;
    text-align: left;
    margin-left: 20px;
  }
  .title {
    flex: 3;
    font-size: 20px;
    font-weight: 900;
    color: #333333;
  }
  .create {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    margin-right: 20px;
  img {
    width: 20px;
    height: 20px;
  }
  .text {
    vertical-align: super;
    font-size: 14px;
    color: #07BC4B;
  }
  }
  }
</style>
